<template>
  <div class="slider">
    <el-scrollbar style="height: calc(100% - 40px)">
      <MenuNavs :collapse="isCollapse"></MenuNavs>
    </el-scrollbar>
    <div class="menu-operate-warp flex-box align-center">
      <div
        class="icon-warp flex-box align-center justify-center"
        @click="clickHandler"
      >
        <el-icon v-if="isCollapse"><Fold /></el-icon>
        <el-icon v-else><Expand /></el-icon>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
@media screen and (max-width: 1000px) {
  .slider {
    display: none !important;
  }
}
.slider {
  background-color: #fff;
  .menu-operate-warp {
    height: 39px;
    padding-left: 12px;
    border-top: 1px solid #f0f0f0;
    .icon-warp {
      width: 24px;
      height: 24px;
      border-radius: 4px;
      cursor: pointer;
      &:hover {
        background-color: #f3f3f3;
      }
    }
  }
}
</style>
<script setup lang="ts">
import { Fold, Expand } from "@element-plus/icons-vue";
import MenuNavs from "./navs/MenuNavs.vue";
import { useCollapse } from "@/hooks/layout/useCollapse";
const { isCollapse, clickHandler } = useCollapse();
</script>
